import { Directive, Renderer, ElementRef, AfterViewInit, EventEmitter } from "@angular/core";
import { ResizingService } from "./resizing.service";

@Directive({
  selector: "[resizing]",
  inputs: [
    "targetToWatch"
  ],
  outputs: [
    "afterResizing"
  ]
})
export class ResizeingDirective implements AfterViewInit {
  afterResizing = new EventEmitter();
  target: HTMLElement;
  constructor(private resizing: ResizingService, private elemRef: ElementRef) {
    this.target = elemRef.nativeElement;
  }
  ngAfterViewInit() {
    let { resizing, afterResizing, target } = this;
    resizing.source.subscribe(e => {
      afterResizing.emit({
        window: {
          width: window.innerWidth,
          height: innerHeight
        },
        target: target.getBoundingClientRect()
      })
    });
  }
}